<template>
  <IDropdown
    ref="dropdownRef"
    :placement="placement"
    wrapper-class="w-full flex-1"
    class="min-w-0 max-w-full sm:max-w-xs"
    icon="Filter"
    no-caret
    v-bind="$attrs"
  >
    <template #toggle-content>
      <span class="truncate">
        {{ activeFilter?.name || $t('core::filters.filters') }}
      </span>
    </template>

    <div class="w-[19rem]">
      <div
        class="border-b border-neutral-200 px-4 py-3 dark:border-neutral-700"
      >
        <a
          v-t="'core::filters.new'"
          href="#"
          :class="[
            'link mr-2 text-sm',
            {
              'border-r border-neutral-300 pr-2 dark:border-neutral-700':
                activeFilter,
            },
          ]"
          @click.prevent="initiateNewFilter"
        />

        <a
          v-show="activeFilter"
          v-t="'core::filters.edit'"
          href="#"
          class="link border-r border-neutral-300 pr-2 text-sm dark:border-neutral-700"
          @click.prevent="initiateEdit"
        />

        <a
          v-show="activeFilter"
          v-t="'core::filters.clear_applied'"
          href="#"
          class="link pl-2 text-sm"
          @click.prevent="clearActive"
        />

        <SearchInput
          v-model="search"
          size="sm"
          class="mt-3"
          :placeholder="$t('core::filters.search')"
        />
      </div>

      <p
        v-show="hasSavedFilters && !searchResultIsEmpty"
        class="mt-1 inline-flex items-center truncate px-4 py-2 text-sm font-medium text-neutral-900 dark:text-neutral-200"
      >
        <Icon
          icon="Bars3"
          class="mr-2 h-5 w-5 text-neutral-500 dark:text-neutral-300"
        />
        {{ $t('core::filters.available') }}
      </p>

      <p
        v-show="!hasSavedFilters || searchResultIsEmpty"
        v-t="'core::filters.not_available'"
        class="block px-4 py-2 text-sm text-neutral-500 dark:text-neutral-300"
      />

      <div
        v-show="hasSavedFilters && !searchResultIsEmpty"
        class="inline-block max-h-80 w-full overflow-auto"
      >
        <FilterDropdownItem
          v-for="filter in filteredList"
          :key="filter.id"
          :identifier="identifier"
          :view="view"
          :filter-id="filter.id"
          :name="filter.name"
          @click="handleFilterSelected"
        />
      </div>
    </div>
  </IDropdown>
</template>

<script setup>
import { computed, ref } from 'vue'

import { emitGlobal } from '@/Core/composables/useGlobalEventListener'
import { useQueryBuilder } from '@/Core/composables/useQueryBuilder'

import { useFilterable } from '../../composables/useFilterable'

import FilterDropdownItem from './FiltersDropdownItem.vue'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps({
  placement: { default: 'bottom-end', type: String },
  identifier: { required: true, type: String },
  view: { required: true, type: String },
})

const emit = defineEmits(['apply'])

const { queryBuilderRules } = useQueryBuilder(props.identifier, props.view)

const {
  filters,
  activeFilter,
  filtersBuilderVisible,
  toggleFiltersBuilderVisibility,
} = useFilterable(props.identifier, props.view)

const dropdownRef = ref(null)
const search = ref(null)

const searchResultIsEmpty = computed(
  () => search.value && filteredList.value.length === 0
)

const hasSavedFilters = computed(() => filters.value.length > 0)

const filteredList = computed(() => {
  if (!search.value) {
    return filters.value
  }

  return filters.value.filter(filter => {
    return filter.name.toLowerCase().includes(search.value.toLowerCase())
  })
})

function hide() {
  dropdownRef.value.hide()
}

function clearActive() {
  activeFilter.value = null

  emit('apply', queryBuilderRules.value)
}

function initiateEdit() {
  toggleFiltersBuilderVisibility()
  hide()
}

function initiateNewFilter() {
  if (activeFilter.value) {
    clearActive()
  }

  filtersBuilderVisible.value = true

  hide()
}

function handleFilterSelected(id) {
  emitGlobal(`${props.identifier}-${props.view}-filter-selected`, id)
}
</script>
